<template>
  <!-- 信息录入 -->
  <div class="box">
    <el-form
      class="addInfor"
      label-width="100px"
      size="small"
      :inline="true"
      ref="inforForm"
      :model="form"
      :rules="rules"
    >
      <el-form-item label="申请人姓名" prop="basicBorrowerName">
        <el-input v-model="form.basicBorrowerName"></el-input>
      </el-form-item>
      <el-form-item label="身份证号码" prop="basicBorrowerCard">
        <el-input v-model="form.basicBorrowerCard"></el-input>
      </el-form-item>
      <el-form-item label="联系电话" prop="basicBorrowerPhone">
        <el-input v-model="form.basicBorrowerPhone"></el-input>
      </el-form-item>
      <el-form-item label="是否有公积金">
        <el-select v-model="form.haveAccount">
          <el-option
            v-for="item in isHaveAcc"
            :key="item.itemValue"
            :label="item.itemText"
            :value="item.itemValue"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="原公积金账号" v-if="hasAcc">
        <el-input v-model="form.account"></el-input>
      </el-form-item>
      <el-form-item label="账号状态" v-if="hasAcc">
        <el-select v-model="form.accountStatus">
          <el-option
            v-for="item in accStatus"
            :key="item.itemValue"
            :label="item.itemText"
            :value="item.itemValue"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="归属银行" v-if="!hasAcc">
        <el-select v-model="form.bankType">
          <el-option
            v-for="item in accBank"
            :key="item.itemValue"
            :label="item.itemText"
            :value="item.itemValue"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="一类银行卡号" v-if="!hasAcc">
        <el-input v-model="form.bankNum"></el-input>
      </el-form-item>
      <el-form-item label="受理时间">
        <el-date-picker
          v-model="form.acceptTime"
          type="date"
          placeholder="选择日期"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item label="月缴金额">
        <el-input type="number" v-model="form.monthMoney"></el-input>
      </el-form-item>
      <el-form-item label="代缴存时间">
        <el-date-picker
          v-model="agencySaveTime"
          type="monthrange"
          range-separator="至"
          start-placeholder="开始月份"
          end-placeholder="结束月份"
        >
        </el-date-picker>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { getAstatus, saveOrder } from "../../../src/assets/js/api";
import { GMTToStr } from "../../assets/js/utlis";
export default {
  name: "Information",
  created() {
    //获取各数据字典
    this.classification();
  },
  data() {
    return {
      form: {
        basicBorrowerName: "",
        basicBorrowerCard: "",
        basicBorrowerPhone: "",
        haveAccount: 0,
        bankType: 1,
        accountStatus: 1
      },
      isHaveAcc: [],
      accStatus: [],
      accBank: [],
      agencySaveTime: [],
      rules: {
        basicBorrowerName: [
          { required: true, message: "请输入申请人姓名", trigger: "blur" }
        ],
        basicBorrowerCard: [
          { required: true, message: "请填写证件号码", trigger: "blur" },
          {
            pattern: /(^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$)|(^[1-9]\d{5}\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{2}$)/,
            message: "证件号码格式有误！",
            trigger: "blur"
          }
        ],
        basicBorrowerPhone: [
          { required: true, message: "请输入手机号码", trigger: "change" },
          {
            validator: function(rule, value, callback) {
              if (/^1[345789]\d{9}$/.test(value) == false) {
                callback(new Error("手机号格式错误"));
              } else {
                callback();
              }
            },
            trigger: "blur"
          }
        ]
      }
    };
  },
  computed: {
    hasAcc: function() {
      if (this.form.haveAccount == 0) {
        return false;
      } else {
        return true;
      }
    }
  },
  methods: {
    //表单验证
    validataForm(orderNumber) {
      this.$refs["inforForm"].validate(valid => {
        if (valid) {
          this.form.orderNumber = orderNumber;
          let prductId = parseInt(sessionStorage.getItem("prductId"));
          this.form.productId = prductId;
          //转换日期格式
          if (this.form.acceptTime) {
            this.form.acceptTime = GMTToStr(this.form.acceptTime);
          }
          if (this.agencySaveTime && this.agencySaveTime[0]) {
            this.form.agencyBeginTime = GMTToStr(this.agencySaveTime[0]);
            this.form.agencyEndTime = GMTToStr(this.agencySaveTime[1]);
          }
          saveOrder(this.form).then(res => {
            if (res.code == 200) {
              this.$message.success(res.message);
              this.$router.replace({ path: "/Index/Accfund" });
            } else {
              this.$message.error(res.message);
            }
          });
        } else {
          this.$message.error("请检查输入的格式");
          return false;
        }
      });
    },
    //获取各字典状态
    classification() {
      //获取是否状态
      getAstatus("whether_state").then(res => {
        this.isHaveAcc = res.data;
        this.isHaveAcc.map(item => {
          item.itemValue = Number(item.itemValue);
        });
      });
      //获取银行分类
      getAstatus("bank_type").then(res => {
        this.accBank = res.data;
        this.accBank.map(item => {
          item.itemValue = Number(item.itemValue);
        });
      });
      //获取公积金状态
      getAstatus("accumulation_status").then(res => {
        this.accStatus = res.data;
        this.accStatus.map(item => {
          item.itemValue = Number(item.itemValue);
        });
      });
    }
  }
};
</script>
<style scoped type="less">
.box {
  line-height: 40px;
}
.addInfor {
  text-align: left;
}
.addInfor ::v-deep.el-form-item__content {
  width: 210px;
  vertical-align: middle;
}
.addInfor ::v-deep.el-date-editor.el-input {
  width: 100%;
}
.addInfor ::v-deep.el-form-item--small.el-form-item {
  margin-bottom: 10px;
}
</style>
